<template>
	<view class="top-load">
		<view class="c-load" :style="'width:'+loadingSize+'rpx;height:'+loadingSize+'rpx;color:'+loadingColor+';'">
			<view class="c-load01" v-if="loadingType == 'circular'">
				<view class="c-load01-i" v-for="(item,index) in load01Style" :key="index" :style="'transform: rotate('+item.deg+'deg);opacity:'+item.opacity"></view>
			</view>
			<view class="c-load02" v-else></view>
		</view>
		<text class="c-load-slot" v-if="loadingText != ''" :style="'color:'+loadingColor+';font-size:'+loadingTextSize+'rpx;'">
			<slot />
		</text>
	</view>
</template>

<script>
	export default {
		props:{
			loadingType:{
				type:String,
				default:"circular"  //可选circular,spinner
			},
			loadingSize:{
				type:[String,Number],
				default:50,
			},
			loadingColor:{
				type:String,
				default:"#ffffff"
			},
			loadingText:{
				type:String,
				default:""
			},
			loadingTextSize:{
				type:[String,Number],
				default:30
			}
		},
		data(){
			return{
				load01Style:[]
			}
		},
		created() {
			this.init_load01()
		},
		methods:{
			init_load01:function(){
				var deg = 30,
					loop = 0;
				var l = 360/deg;
				var arr = [];
				do{
					var obj = {};
					obj.deg = 30 + 30*loop;
					obj.opacity = 1 - 0.0625*loop
					arr.push(obj)
					loop++;
				}while(loop<l)
				// console.log(arr)
				this.load01Style = arr
			}
		}
	}
</script>

<style scoped>
	.top-load{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		height: 100%;
	}
	.c-load{
		display: inline-block;
		margin: 0 15rpx;
	}
	.c-load01{
		position: relative;
		/* display: inline-block; */
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		vertical-align: middle;
		-webkit-animation: c-rotate 0.8s linear infinite;
		animation: c-rotate 0.8s linear infinite;
		animation-timing-function: steps(12);
	}
	.c-load02{
		position: relative;
		/* display: inline-block; */
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		vertical-align: middle;
		-webkit-animation: c-rotate 0.8s linear infinite;
		animation: c-rotate 0.8s linear infinite;
		border: 2rpx solid transparent;
		border-top-color: initial;
		border-radius: 100%;
	}
	.c-load01-i{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.c-load01-i::before{
		display: block;
		width: 4rpx;
		height: 25%;
		margin: 0 auto;
		background-color: currentColor;
		border-radius: 40%;
		content: ' ';
	}
	@keyframes c-rotate{
		0% {
		    -webkit-transform: rotate(0deg);
		    transform: rotate(0deg);
		}
		100% {
		    -webkit-transform: rotate(360deg);
		    transform: rotate(360deg);
		}
	}
	.c-load-slot{
		margin-left: 20rpx;
	}
</style>
